<template>
  <div class="category">
  	<!-- 头部 -->
		<shop-header ref="shopHeader">	
			<router-link to="/search" tag="div" class="search-link">
        <x-icon class="search-icon" type="ios-search" size="20"></x-icon>
        <span>请输入要搜索的商品</span>
    	</router-link>	
		</shop-header>
		 <!-- <footer-nav v-show="isShowFtNav" bg-color="#404042" text-color="#fff" :position="positionOpt"></footer-nav> -->
		 <div class="goods">
		 	<div class="menu-wrapper">
		 		<ul class="menu-container">
		 			<li @click="toggleCurIndex(index)" v-for="(item,index) in menuList" :key="index" :class="{ current:nowIndex == index }" class="menu-item bottom-1px ellipsis">{{ item.name }}</li>
		 		</ul>
		 	</div>
		 	<div class="gd-category-wrapper">
		 		<div v-if="nowIndex == i" v-for="(item,i) in menuList" :key="i">
		 			<ul class="gd-category-container">
			 			<li class="gds-list gds-list-hook" v-for="(n,j) in item.children" :key="j">
			 				<h2 class="category-name">{{ n.name }}</h2>
			 				<ul class="gds-list-container clearfix">
			 					<router-link :to="{ path: '/goods', query: { cid: c._id } }" tag="li" class="gds-item" v-for="(c, k) in n.children" :key="k">
			 						<div class="icon"><img :src="c.imgUrl"></div>
			 						<span>{{ c.name }}</span>
			 					</router-link>
			 				</ul>
			 			</li>
			 		</ul>
		 		</div>
			 		
		 	</div>
		 </div>
  </div>
</template>

<script>
import ShopHeader from '@/components/public/ShopHeader'
import BScroll from 'better-scroll'
import http from '@/utils/http'
export default {
	components: {
		ShopHeader
	},
  data () {
  	return {
  		nowIndex: 0,
			menuList: []
  	}
  },
  methods: {
  	toggleCurIndex (index) {
  		this.nowIndex = index
  	}
  // 	_initScroll () {
		// 	this.menuScroll = new BScroll(this.$refs.menuWrapper, {
		// 		click: true
		// 	})
		// 	this.categoryScroll = new BScroll(this.$refs.categoryWrapper, {
		// 		click: true,
		// 		probeType: 3
		// 	})
		// 	this.categoryScroll.on('scroll', (pos) => {
		// 		this.scrollY = Math.abs(Math.round(pos.y))
		// 		this.$refs.shopHeader.isShow = false
		// 	})
		// },
		// selectMenu (index, event) {
		// 	if (!event._constructed) return
		// 	let categoryWrapper = this.$refs.categoryWrapper.getElementsByClassName('gds-list-hook')
		// 	let el = categoryWrapper[index]
		// 	this.categoryScroll.scrollToElement(el, 500)
		// },
		// _calculateHeight () {
		// 	let categoryWrapper = this.$refs.categoryWrapper.getElementsByClassName('gds-list-hook')
		// 	let height = 0
		// 	this.listHeight.push(height)
		// 	for (let i = 0; i < categoryWrapper.length; i++) {
		// 		height += categoryWrapper[i].clientHeight
		// 		this.listHeight.push(height)
		// 	}
		// }
  },
  mounted () {
  	http.get('/api/v1/getCategory', {}, false, res => {
  		if (res.status == 1) {
  			this.menuList = res.data
  		}
  	})

  // 	this.$nextTick(() => {
		// 	this._initScroll()
		// 	this._calculateHeight()
		// })
  }
}
</script>

<style scoped>
.search-link {
	background: #f5f5f5;
	border-radius: 30px;
	height: 30px;
  font-size: 0;
  line-height: 30px;
  box-sizing: border-box;
  margin-right: 10px;
}
.search-link * {
  display: inline-block;
  vertical-align: middle;
}
.search-icon {
	fill: #999;
}
.search-link span {
  font-size: 12px;
  padding-left: 5px;
  color: #999;
}
.goods {
	display: flex;
	position: absolute;
	top: 43px;
	bottom: 0;
	width: 100%;
	max-width: 640px;
	overflow: hidden;
}
.menu-wrapper {
	flex: 0 0 80px;
	width: 80px;
	background: #fff;
	width: 80px;
	overflow-y: scroll;
}
.menu-item {
	height: 46px;
	line-height: 46px;
	text-align: center;
	padding: 0 5px;
	font-size: 13px;
	font-weight: bold;
	color: #080808;
}
.menu-item:after {
	bottom: 0;
}
.menu-item.current {
	color: #f23030;
}
.gd-category-wrapper {
	flex: 1;
	padding: 0 7px;
	overflow-y: scroll; 
}
.gds-list {
	padding-top: 15px;
}
.category-name {
	font-size: 12px;
	line-height: 12px;
	font-weight: bold;
	color: #080808;
}
.gds-list-container {
	margin-top: 8px;
	background: #fff;
	padding: 8px 8px 0 8px;
}
.gds-item {
	width: 33.333%;
	float: left;
	text-align: center;
} 
.gds-item .icon img {
	width: 55px;
	height: 55px;
	display: inline;
}
.gds-item span {
	display: block;
	line-height: 16px;
	font-size: 12px;
	color: #686868;
	height: 32px;
	margin: 2px 0 5px 0;
}
</style>
